<script setup lang="ts">
import router from '@/router';
import { informationStore } from '../stores/information'
import { cityStore } from '../stores/city'
import { toRaw } from 'vue';
import { ref } from 'vue';
import { showToast } from 'vant';
import 'vant/es/toast/style'


// 跳转路由
let goPage = () => {
    obj.toux = toux.value;
    obj.nic = value;
    obj.sex = checked.value;
    obj.intro = int.value;
    obj.cover = cover.value;
    localStorage.setItem("user", JSON.stringify(obj));

    user.toux = toux.value;
    user.nic = value;
    user.sex = checked.value;
    user.intro = int.value;
    user.cover = cover.value;
    router.back();
}

let user = toRaw(informationStore().$state.information);

// 头像
let toux = ref(user.toux);
const afterRead = (file: any) => {
    toux.value = file;
}

// 昵称
let value = user.nic;

// 性别
let checked = ref(user.sex);

// 单选框发生变化时
let che = () => {
    console.log(checked.value);
}

// 位置
let city = cityStore().$state.city;

// 个人简介
let int = ref(user.intro);

// 个人主页封面
let cover = ref(user.cover);
const lastRead = (file: any) => {
    cover.value = file;
}


let obj = JSON.parse(localStorage.getItem('user') || '{}')

// 保存
// let set = () => {

//     showToast('保存成功');
// }


</script>


<template>
    <div class="edit">
        <div class="edit_title">
            <img @click="goPage" src="../assets/images/edit/ic_creator_center_back.png">
            编辑个人资料
        </div>

        <div class="edit_list">
            <div class="edit_list_item">
                <div class="edit_list_item_left">头像</div>
                <div class="edit_list_item_right">
                    <van-uploader :after-read="afterRead">
                        <img :src="toux.content || toux">
                    </van-uploader>
                    <img src="../assets/images/edit/circle_home_arrow.png">
                </div>
            </div>
            <div class="edit_list_item">
                <div class="edit_list_item_left">昵称</div>
                <div class="edit_list_item_right">
                    <input type="text" v-model="value">
                    <img src="../assets/images/edit/circle_home_arrow.png">
                </div>
            </div>
            <div class="edit_list_item">
                <div class="edit_list_item_left">性别</div>
                <div class="edit_list_item_right">
                    <!-- <div>男</div> -->
                    <van-radio-group v-model="checked" direction="horizontal" @click="che">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                    <img src="../assets/images/edit/circle_home_arrow.png">
                </div>
            </div>
            <div class="edit_list_item">
                <div class="edit_list_item_left">位置</div>
                <div class="edit_list_item_right">
                    <div>{{ city }}</div>
                    <img src="../assets/images/edit/circle_home_arrow.png">
                </div>
            </div>
            <div class="edit_list_item">
                <div class="edit_list_item_left">个人简介</div>
                <div class="edit_list_item_right">
                    <input type="text" v-model="int">
                    <img src="../assets/images/edit/circle_home_arrow.png">
                </div>
            </div>
            <div class="edit_list_item">
                <div class="edit_list_item_left">个人封面主页</div>
                <div class="edit_list_item_rights">
                    <van-uploader :after-read="lastRead">
                        <img :src="cover.content || cover">
                    </van-uploader>
                    <img src="../assets/images/edit/circle_home_arrow.png">
                </div>
            </div>
        </div>

        <!-- <div class="edit_baoc"><span @click="set">保存</span></div> -->
    </div>
</template>

<style lang="scss" scoped>
.edit_title {
    position: relative;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    font-weight: 500;

    img {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}

.edit_list {
    padding: 0 12px;
}

.edit_list_item {
    height: 44px;
    line-height: 44px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;

    .edit_list_item_right {
        display: flex;

        img {
            width: 44px;
            height: 44px;
            display: block;
            border-radius: 50%;

            &:last-child {
                margin-top: 12px;
                margin-left: 5px;
                width: 20px;
                height: 20px;
            }
        }

        input {
            margin-top: 8px;
            height: 25px;
            text-align: end;
            border: none;
        }
    }

    .edit_list_item_rights {
        display: flex;

        img {
            width: 44px;
            height: 40px;
            display: block;

            &:last-child {
                margin-top: 12px;
                margin-left: 5px;
                width: 20px;
                height: 20px;
            }
        }
    }
}

.edit_baoc {
    padding: 0 12px;
    box-sizing: border-box;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 40px;

    span {
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        display: block;
        background-color: #12c1b6;
        border-radius: 20px;
        font-size: 16px;
        color: white;
    }
}
</style>